<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bespoke Synth</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/grayscale.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- Navigation -->
    <!--<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">
                    <i class="fa fa-play-circle"></i> Bespoke
                </a>
            </div>

            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#video">Video</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Get</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>-->

    <!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1 class="brand-heading">Bespoke</h1>
                        <p class="intro-text">A modular DAW for Mac, Windows, and Linux.</p>
                        <a href="#contact" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- About Section -->
    <section id="about" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Introducing: Bespoke!</h2>
                <p>Bespoke is a software modular synthesizer. It contains a bunch of modules, which you can connect together to create sounds.<br/><img src="img/bespoke_patching.gif"/></p>
                <p>Bespoke is like a DAW* in some ways, but with less of a focus on a global timeline. Instead, it has a design more optimized for jamming and exploration.</p>
                <p>Bespoke is a project I started in 2011 as a way for me to learn more about creating music. Instead of putting in the time to learn the intricacies of an existing DAW, I took on a foolhardy exercise to try to build my own. The software is custom built by me and for me, hence the name "Bespoke".</p>
                <p>Bespoke's core design is to break everything into separate modules that can be patched together in a custom layout, much like a hardware modular. Bespoke is designed to be highly customizable, with the idea that any of the custom layouts that you create will be "bespoke" to you as well.</p>
                <p>In a way, Bespoke is like if I smashed Ableton to bits with a baseball bat, and asked you to put it back together.</p>
                <p><span class="table-footer"></br>*("DAW" means "digital audio workstation", which is a fancy term for music production software)</span></p>
            </div>
        </div>

        <p> <iframe width="1120" height="630" src="https://www.youtube-nocookie.com/embed/NnrStjS4NhU?rel=0" frameborder="0" allowfullscreen></iframe></p>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="container content-section text-center">
         <div class="row">
             <div class="col-lg-8 col-lg-offset-2">
                <h2>Get Bespoke</h2>
                 <p>Bespoke has releases for Mac, Windows, and Linux.<br/>It is <a href="https://github.com/BespokeSynth/BespokeSynth/">open source</a>, licensed with GPLv3.</p>
                 <p>Bespoke is free, but you can pay for it if you want. All versions are identical.<br/>Your payment goes directly to the <a href="https://www.naacpldf.org/">NAACP Legal Defense and Educational Fund</a>.<br/>Here is a feature matrix for the pricing tiers:</p>
             </div>
                 <p>
                     <div class="box">
                        <!-- The surrounding box -->
                     
                        <!-- The front container -->
                        <div class="front">
                           <table class="services-table">
                           <tr>
                              <th class="services">Access to all 190+ modules</th>
                           </tr>
                           <tr>
                              <th class="services">VST plugin hosting</th>
                           </tr>
                           <tr>
                              <th class="services">MIDI controller support</th>
                           </tr>
                           <tr>
                              <th class="services">Python livecoding</th>
                           </tr>
                           <tr>
                              <th class="services">Windows, Mac, and Linux builds</th>
                           </tr>
                           <tr>
                              <th class="services">Discord access</th>
                           </tr>
                           <tr>
                              <th class="services">Access to all future updates</th>
                           </tr>
                           <tr>
                              <th class="services">Access to documentation</th>
                           </tr>
                           <tr>
                              <th class="services">$20 donated to charity</th>
                           </tr>
                           <tr>
                              <th class="services">$40 donated to charity</th>
                           </tr>
                           </table>
                           <table class="price-matrix" border="0">
                           <tr>
                              <th class="header-free"><b>bespoke</b>
                                 <hr />
                                 free
                              </th>
                              <th class="header-plus"><b>bespoke plus</b>
                                 <hr />
                                 $20
                              </th>
                              <th class="header-pro"><b>bespoke pro</b>
                                 <hr />
                                 $40
                              </th>
                           </tr>
                           
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"><div class="check"></div></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"></td>
                              <td class="border"><div class="check"></div></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="border"></td>
                              <td class="border"></td>
                              <td><div class="check"></div></td>
                           </tr>
                           <tr>
                              <td class="padded">
                                 <a href="https://github.com/BespokeSynth/BespokeSynth/releases/download/v1.3.0/BespokeSynth-Windows-1_3_0.msi">Download for Windows</a><br/><br/>
                                 <a href="https://github.com/BespokeSynth/BespokeSynth/releases/download/v1.3.0/BespokeSynth-Mac-1_3_0.dmg">Download for Mac</a><br/><br/>
                                 <a href="https://software.opensuse.org//download.html?project=home%3Abespokesynth&package=bespokesynth">Download for Linux</a>
                              </td>
                              <td class="payment-td">
                                 <span class="payment-price-plus">$20</span>
                                 <div id="smart-button-container">
                                    <div style="text-align: center;">
                                       <div id="payment-button-container">
                                       <script>
                                          function replaceAfterButtonClick()
                                          {
                                             const element = document.getElementById('payment-button-container');
                                             element.innerHTML = '';
                                             element.innerHTML = '<td class="padded">Thank you!!!<br/><a href="https://github.com/BespokeSynth/BespokeSynth/releases/download/v1.3.0/BespokeSynth-Windows-1_3_0.msi">Download for Windows</a><br/><a href="https://github.com/BespokeSynth/BespokeSynth/releases/download/v1.3.0/BespokeSynth-Mac-1_3_0.dmg">Download for Mac</a><br/><a href="https://software.opensuse.org//download.html?project=home%3Abespokesynth&package=bespokesynth">Download for Linux</a></td>';
                                          }
                                       </script>
                                       <a href="https://engage.naacpldf.org/dBCvDTd9IEiXX_jPkmkT_w2?&am=20" class="donate-button" target="_blank"
                                          onclick="replaceAfterButtonClick();"><img src="img/ldf_donate_grey.png"/></a>
                                       </div>
                                    </div>
                                    </div>
                              </td>
                              <td class="payment-td">
                                 <span class="payment-price-pro">$40</span>
                                 <div id="smart-button-container">
                                    <div style="text-align: center;">
                                       <div id="payment-button-container2">
                                          <script>
                                             function replaceAfterButtonClick2()
                                             {
                                                const element = document.getElementById('payment-button-container2');
                                                element.innerHTML = '';
                                                element.innerHTML = '<td class="padded">Thank you!!!<br/><a href="https://github.com/BespokeSynth/BespokeSynth/releases/download/v1.3.0/BespokeSynth-Windows-1_3_0.msi">Download for Windows</a><br/><a href="https://github.com/BespokeSynth/BespokeSynth/releases/download/v1.3.0/BespokeSynth-Mac-1_3_0.dmg">Download for Mac</a><br/><a href="https://software.opensuse.org//download.html?project=home%3Abespokesynth&package=bespokesynth">Download for Linux</a></td>';
                                             }
                                          </script>
                                          <a href="https://engage.naacpldf.org/dBCvDTd9IEiXX_jPkmkT_w2?&am=40" class="donate-button" target="_blank"
                                             onclick="replaceAfterButtonClick2();"><img src="img/ldf_donate.png"/></a>
                                          </div>
                                       </div>
                                    </div>
                                    </div>
                              </td>
                           </tr>
                           </table>
                        </div>
                     </div>
                     <div class="col-lg-8 col-lg-offset-2">
                        <span class="table-footer">(To be extra clear: all three versions of Bespoke above are identical, they are the exact same files. You are completely welcome to use Bespoke for free forever without paying anything, guilt-free.)</span>
                        </br></br>
                        <span class="table-footer">(You can also get the download links to the releases from GitHub <a href="https://github.com/BespokeSynth/BespokeSynth/releases">here.</a>)</span>
                     </div>
                 </p>
               <div class="col-lg-8 col-lg-offset-2">
                 <p><br/>You can join the <a href="https://discord.gg/YdTMkvvpZZ">Discord</a> for discussion and support, and you can follow development progress on <a href="https://github.com/BespokeSynth/BespokeSynth/">GitHub</a>.</p>
                 <p>You can also find me on Twitter at <a href="https://twitter.com/awwbees">@awwbees</a></p>
                 <ul class="list-inline banner-social-buttons">
                   <li>
                      <a href="https://discord.gg/YdTMkvvpZZ" class="btn btn-default btn-lg"><i class="fa fa-discord fa-fw"></i> <span class="network-name">Discord</span></a>
                   </li>
                   <li>
                      <a href="https://twitter.com/awwbees" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                   </li>
                   <li>
                      <a href="https://github.com/BespokeSynth/BespokeSynth/" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                   </li>
                   <li>
                      <a href="http://www.reddit.com/r/BespokeSynth/" class="btn btn-default btn-lg"><i class="fa fa-reddit fa-fw"></i> <span class="network-name">Reddit</span></a>
                   </li>
                 </ul>
             </div>
         </div>
     </section>

    <!-- Video Section -->
    <section id="video" class="content-section text-center">
        
           <div class="container">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2>Getting Started</h2>
                   <p>You can find the documentation for Bespoke and an introduction video <a href="docs/index.html">here</a>.</p>
                   <p>All of the information on the usage of modules is also available via a tooltip system within the application.</p>
                </div>
           </div>

    </section>

    <!-- Footer -->
    <footer>
        <div class="container text-center">
            <br/><br/><br/>
            <a href="http://bespokesynth.com"><img src="img/bespoke_footer.png"/></a>
            <br/><br/><br/>
        </div>
    </footer>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>

    <!-- Google analytics -->    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-59239115-1', 'auto');
      ga('send', 'pageview');

    </script>

</body>

</html>
